<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="title" content="内部社区论坛"/>
    <meta name="keywords" content="社区,论坛"/>
    <meta name="renderer" content="webkit"/>
    <meta name="description" content="内部社区论坛"/>
    <meta name="author" content="李乐乐"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/lib/swiper.css}">
    <script th:src="@{/lib/swiper.js}"></script>
    <script th:src="@{/lib/vue-awesome-swiper.js}"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="notice">
        <van-notice-bar
                left-icon="volume-o"
                :text="adminNotice"
        ></van-notice-bar>
    </div>
    <van-nav-bar title="首页">
    </van-nav-bar>
    <div style="margin-bottom: 100px;">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item th:each="banner,stat : ${banner}">
                <a th:href="${banner.bannerRoute}">
                    <img th:src="${banner.bannerUrl}" alt="" style="width: 100%;">
                </a>
            </van-swipe-item>
        </van-swipe>
        <swiper :options="swiperOption">
            <swiper-slide th:each="tabMenu,stat:${tabMenu}" class="tab_menu">
                <a th:text="${tabMenu.tabContent}" th:href="@{'/home/menuDetail?title='+${tabMenu.tabContent}}"></a>
            </swiper-slide>
        </swiper>
        <div>
            <van-search
                    v-model="getArticlePageParam.keyWord"
                    show-action
                    label="标题"
                    placeholder="请输入搜索关键词"
            >
                <template #action>
                    <div @click="search">搜索</div>
                </template>
            </van-search>
        </div>
        <transition name="van-fade">
            <div>
                <van-cell-group v-show="articleList.length">
                    <van-cell v-for="(item,index) in articleList" :key="index"
                              is-link @click="toArticleDetail(item.id)"/>
                    <template #title>
                        <span class="custom-title">{{item.articleTitle}}</span>
                        <van-icon name="fire-o" v-if="item.hot==1" color="red"/>
                    </template>
                    <template #label>
                        <div class="van-multi-ellipsis--l2">{{item.articleContent}}</div>
                    </template>
                </van-cell-group>
                <van-empty description="暂无更多数据" v-show="!articleList.length">
                </van-empty>
            </div>
        </transition>
        <van-pagination
                v-model="getArticlePageParam.pageCurrent"
                :items-per-page="10"
                :total-items="total"
                :show-page-size="3"
                force-ellipses @change="changePage" style="margin-top: 10px;"
                v-show="articleList.length"></van-pagination>
    </div>
    <van-tabbar v-model="active" route>
        <van-tabbar-item name="Community" icon="home-o" url="http://www.baidu.com">Community</van-tabbar-item>
        <van-tabbar-item name="More" icon="friends-o" badge="5" url="https://personalclub.club/">More</van-tabbar-item>
        <van-tabbar-item name="Profile" icon="setting-o" badge="20" url="/home/profile">Profile</van-tabbar-item>
    </van-tabbar>
</div>
<script th:inline="javascript">
    Vue.use(window.VueAwesomeSwiper);
    let mv = new Vue({
        el: "#app",
        data: {
            refreshing: false,
            value: '',
            active: 'name',
            total: 0,
            swiperOption: {
                slidesPerView: 4
            },
            getArticlePageParam: {
                pageCurrent: 1,
                pageSize: 10,
                keyWord: ''
            },
            articleList: [],
            adminNotice: '管理员的重大通知会在这里出现的，请注意关注'
        },
        components: {},
        computed: {},
        methods: {
            async getArticlePage() {
                const result = await httpPost("/article/getArticlePage", this.getArticlePageParam);
                if (result.code == 200) {
                    this.articleList = result.data.records;
                    this.total = result.data.total;
                }
            },
            refresh() {
                this.getArticlePageParam.pageCurrent++;
                this.getArticlePage();
            },
            toArticleDetail(id) {
                window.location.href = [[${#request.getContextPath()}]] + '/home/articleDetail/' + id;
            },
            resetRefresh() {
                this.getArticlePageParam.pageSize = 10;
                this.getArticlePageParam.pageCurrent = 1;
                this.getArticlePage();
            },
            changePage(value) {
                this.getArticlePageParam.pageCurrent = value;
                this.getArticlePage();
            },
            search() {
                this.getArticlePage();
            },
            /**
             * admin websocket推送信息
             */
            getAdminNotice(i) {
                let socket;
                let socketUrl = "ws://127.0.0.1:9999/webSocket/用户" + i;
                if (socket != null) {
                    socket.close();
                    socket = null;
                }
                socket = new WebSocket(socketUrl);
                socket.onopen = function () {
                    console.log("成功接入webSocket，等待webSocket通知吧。。。");
                };
                //获得消息事件
                socket.onmessage = (message) => {
                    console.log(message);
                    this.adminNotice = message.data;
                }
                // socket.onmessage = function (message) {
                //     console.log(message);
                //     this.adminNotice = message.data;
                // };
                //关闭事件
                socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function () {
                    console.log("websocket发生了错误");
                }
            }
        },
        mounted() {
            this.getArticlePage();
            for (let i = 0; i < 10; i++) {
                this.getAdminNotice(i);
            }
        }
    })
</script>
<script>

</script>
</body>
<style>
    .tab_menu {
        width: 25%;
        text-align: center;
        height: 30px;
        background: #39a9ed;
        border-left: 1px solid #fff;
        box-sizing: border-box;
    }

    .tab_menu > a {
        color: #fff;
        line-height: 30px;
        box-sizing: border-box;
    }

    .notice {
        /*position: fixed;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100%;*/
    }
</style>
</html>